<template>
	<div class="nav_box" :style="{background:sysTheme.level2_bg_color}">
		<!--<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" :background-color="bg_color" :text-color="text_color" :active-text-color="active_text_color" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router>
			<template v-for="(x, indexX) in navList">
				<el-submenu :key="x.meta.title" :index="indexX+''" v-if="x.children.length>0">
					<template slot="title">
						<i class="tubiao iconfont" :class="x.icon"></i>
						<span slot="title">{{ x.meta.title }}</span>
					</template>
					<el-menu-item v-for="(y, indexY) in x.children" :key="y.meta.title" :index="y.path" :class="{active: y.path == url}">
						<i class="tubiao iconfont" :class="y.icon"></i>
						<span>{{ y.meta.title }}</span>
					</el-menu-item>
				</el-submenu>
				<el-menu-item :key="x.meta.title" :index="indexX+''" v-else>
					<i class="tubiao iconfont" :class="x.icon"></i>
					<span slot="title">{{ x.meta.title }}</span>
				</el-menu-item>
			</template>
		</el-menu>-->

		<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" :background-color="sysTheme.level2_bg_color" :text-color="text_color" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router>
			<template v-for="(x, indexX) in presentMenu.children">
				<template v-if="x.children && x.children.length">

				</template>
				<template v-else>
					<el-menu-item :key="indexX+''" :index="x.path" :class="{active: x.path == url}">
						<i class="iconfont tubiao" :class="x.icon" :style="{color:x.path == url?sysTheme.theme_color:''}"></i>
						<span slot="title" :style="{color:x.path == url?sysTheme.theme_color:''}">{{ x.meta.title }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
	import { mapMutations, mapState } from "vuex";

	export default {
		data() {
			return {
				isCollapse: false, //是否折叠
				text_color: "#ffffff",
				url: "", //当前点击的路由
				presentMenu: {},
				sysTheme: this.$sysTheme(),
			};
		},
		watch: {
			//监听路由变化
			$route(to, from) {
				this.url = to.path;
			}
		},
		computed: {
			onRoutes() {
				return this.$route.path.replace("/", "");
			},
			...mapState(['navList'])
		},
		created() {
			this.url = this.$route.path;
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.$bus.$on('isCollapse', item => {
					this.isCollapse = item;
				});
				this.$bus.$on('menu', item => {
					this.presentMenu = item;
				});
				this.$bus.$on('changeTheme', () => {
					this.sysTheme = JSON.parse(localStorage.getItem('sysTheme'));
					console.log(this.sysTheme)
				});
			},
			handleOpen(key, keyPath) {
				//console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				//console.log(key, keyPath);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.nav_box {
		height: 100%;
	}
	
	.tubiao {
		margin: 0 10px 0 0;
	}
	
	.active {
		background: rgba(255, 255, 255, 0.2) !important;
	}
	
	//elemeui样式
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		/*min-height: 800px;*/
		height: 100%;
	}
	
	.el-menu {
		max-width: 180px !important;
		border-right: none;
		.el-menu-item {
			width: 100%;
		}
	}
</style>